<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>Map3D - ECHARTS-GL</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes"> <!-- Fullscreen Landscape on iOS -->
    <link rel="stylesheet" href="./common.css">
</head>
<body>
<div id="main"></div>
<script src="../node_modules/echarts/dist/echarts.js"></script>
<script src="../dist/echarts-gl.js"></script>
<script src='lib/mapbox-gl.js'></script>
<link href='lib/mapbox-gl.css' rel='stylesheet'/>
<script src="lib/jquery.min.js"></script>
<script src="lib/dat.gui.js"></script>
<script src="lib/LRU.js"></script>
<script src="https://unpkg.com/sphericalmercator"></script>
<script src="js/commonUI.js"></script>
<script>
    mapboxgl.accessToken = window.location.search.slice(1);
    var chart = echarts.init(document.getElementById('main'));
    var cache = new LRUCache(100);

    chart.setOption({
        mapbox3D: {
            // 北京
            // center: [116.39157, 39.90673],
            // 纽约
            center: [-74.02158343200102, 40.6143657735403],
            // 上海
            // center: [121.4978, 31.2398],
            // 伦敦
            // center: [-0.118092, 51.509865],
            zoom: 17,
            pitch: 10,
            // bearing: -10,
            style: 'mapbox://styles/mapbox/light-v9',
            altitudeScale: 2,
            postEffect: {
                enable: true,
                screenSpaceAmbientOcclusion: {
                    enable: true,
                    intensity: 2,
                    quality: 'high',
                    radius: 7
                },
                screenSpaceReflection: {
                    enable: false
                },
                depthOfField: {
                    enable: false,
                    blurRadius: 5,
                    focalDistance: 80
                }
            },
            light: {
                main: {
                    intensity: 1,
                    alpha: -30,
                    shadow: true,
                    shadowQuality: 'high'
                },
                ambient: {
                    intensity: 0.
                },
                ambientCubemap: {
                    texture: 'asset/pisa.hdr',
                    exposure: 1,
                    diffuseIntensity: 0.5,
                    specularIntensity: 1
                }
            }
        },
        series: [{
            type: 'polygons3D',
            coordinateSystem: 'mapbox3D',
            data: [],
            shading: 'realistic',
            silent: true,
            realisticMaterial: {
                metalness: 0,
                roughness: 0.8
            }
        }]
    });

    function addBuildings(geoJSON) {
        chart.hideLoading();
        var polygonsData = geoJSON.features.filter(function (feature) {
            return feature.geometry.type === 'Polygon'
                || feature.geometry.type === 'MultiPolygon'
        }).map(function (feature) {
            return {
                coords: feature.geometry.coordinates,
                multiPolygon: feature.geometry.type === 'MultiPolygon',
                value: Math.random(),
                height: +feature.properties.height || 5
            };
        });

        chart.addData({
            seriesIndex: 0,
            data: polygonsData
        });
    }

    var requests = [];

    function loadBuildings() {
        chart.hideLoading();
        chart.showLoading();

        chart.setOption({
            series: [{
                // Clear
                data: []
            }]
        });

        var mapbox = chart.getModel().getComponent('mapbox3D').getMapbox();
        var coordBounds = mapbox.getBounds();
        var merc = new SphericalMercator({
            size: 512
        });
        var tileBounds = merc.xyz(
            [coordBounds.getWest(), coordBounds.getSouth(), coordBounds.getEast(), coordBounds.getNorth()],
            15
        );

        var z = 15;
        var loadingCount = 0;

        requests.forEach(function (req) {
            req.abort();
        });
        requests = [];

        function load(url) {
            var geoJSON = cache.get(url);
            if (geoJSON) {
                addBuildings(geoJSON);
            } else {
                loadingCount++;
                var request = $.getJSON(url).done(function (geoJSON) {
                    loadingCount--;
                    cache.put(url, geoJSON);

                    addBuildings(geoJSON);

                    requests.splice(requests.indexOf(request), 1);
                });
                requests.push(request);
            }
        }

        for (var x = tileBounds.minX; x <= tileBounds.maxX; x++) {
            for (var y = tileBounds.minY; y <= tileBounds.maxY; y++) {
                load(`https://tile.mapzen.com/mapzen/vector/v1/512/buildings/${z}/${x}/${y}.json?api_key=${MAPZEN_API}`);
            }
        }
    };


    var gui = new dat.GUI();
    var config = {
        roughness: 0.4
    }
    gui.add(config, 'roughness', 0.1, 0.9).onFinishChange(function () {
        chart.setOption({
            series: [{
                realisticMaterial: {
                    roughness: config.roughness
                }
            }]
        });
    });
    window.addEventListener('resize', function () {
        chart.resize();
    });


    loadBuildings();


    var mapbox = chart.getModel().getComponent('mapbox3D').getMapbox();
    mapbox.on('dragend', loadBuildings);
</script>
</body>
</html>
